<template>
  <base-modal
    :title="$t('system.frameView.changeTenant')"
    :show.sync="visible"
    width="500px"
    class="switchcompanies-dialog"
  >
    <div class="base-modal-content">
      <!-- start 企业轮播 -->
      <div class="enterprises_choose">
        <p class="choose_tit">{{$t('system.SelectTheEnterpriseYouWant')}}</p>
        <div class="swiper-container swiper-no-swiping">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in tenantInform.tenantList" :key="item.tempCode">
              <img :src="item.logoUrl?item.logoUrl:'/resource/images/qiye.jpg'"/>
            </div>
          </div>
          <!-- Add Arrows -->
          <div class="swiper-button-next">
            <img class="brand-left" src="/resource/images/login/you.png" />
          </div>
          <div class="swiper-button-prev">
            <img class="brand-right" src="/resource/images/login/zuo.png" />
          </div>
        </div>
        <p class="enterprise_name">{{enterpriseName}}</p>
      </div>
      <!-- end 企业轮播 -->

      <el-input
        :placeholder="$t('department.resetPassword.inputPassword')"
        :type="inputType"
        v-model="form.password"
      >
        <template slot="prepend"
        ><i class="iconfont icon-account1"></i
        ></template>
        <template slot="suffix"
        >
          <img src="/resource/images/login/hidepassword.png" class="show_icon" @click="changePass('show')" v-if="inputType == 'password'">
          <img src="/resource/images/login/showpassword.png" class="show_icon" @click="changePass('hide')" v-else>
        </template>
       
      </el-input>
      <div class="dialog-footer" slot="footer">
        <el-button @click="visible = false">{{ $t('common.base.cancel')}}</el-button>
        <el-button native-type="submit" type="primary" @click="submit">{{$t('common.base.confirm')}}</el-button>
      </div>
    </div>
  </base-modal>
</template>
<script>
import md5 from 'js-md5';
import Platform from '@src/platform';
import * as SettingApi from '@src/api/SettingApi.ts';
import { userCenterSetTokenInfo, ErrorMap } from '@src/util/userCenter.js';
import { t } from '@src/locales'

// import Swiper from "swiper"
export default {
  name: 'switchcompanies-dialog',
  data() {
    return {
      enterpriseName:'',
      inputType:'password',
      swiperOption: {
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        slideToClickedSlide: true,
        // paginationClickable: true, //点击切换
        slidesPerView: 4,
        spaceBetween: 0,
        centeredSlides: true,
        // 拖动释放时不会输出信息，阻止click冒泡。拖动Swiper时阻止click事件。
        preventLinksPropagation: true,
      },
      carouselArr: [],
      form: {
        ua:'Chrome',
        mode:'PWD',
        tenantId: '',
        password: '',
      },
      init: false, // 初始化表单
      visible: false,
      current: 0
    };
  },
  props:{
    tenantInform: {
      type: Object
    }
  },
  computed: {},
  mounted() {
   
  },
  methods: {
    changePass(value) {
      console.log(value)
      if(value == 'show'){
        this.inputType = 'text';
      }else{
        this.inputType = 'password';
      }
      
    },  
    openDialog() {
      this.visible = true;
      this.init = true;
      this.enterpriseName = this.tenantInform.tenantList[0].tenantName
      let swiper = new Swiper('.swiper-container', {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        on:{
          slideChange:()=>{
            this.enterpriseName = this.tenantInform.tenantList[swiper.activeIndex].tenantName
            // this.form.tenantId = this.tenantInform.tenantList[swiper.activeIndex].id;//更换接口 不用传了
            this.current = swiper.activeIndex
          },
        },
        slideToClickedSlide: true,
        // paginationClickable: true, //点击切换
        offsetPxBefore:20,
        offsetPxAfter:20,
        slidesPerView: 4,
        spaceBetween: 10,
        centeredSlides: true,
        // 拖动释放时不会输出信息，阻止click冒泡。拖动Swiper时阻止click事件。
        preventLinksPropagation: true,
      });
      // 自动切换到当前企业
      this.tenantInform.tenantList.forEach((item,index)=>{
        if(item.currentLoginTenant){
          swiper.slideTo(index)
        }
      })
    },
    // 切换企业
    async submit() {
      try {
        if(!this.form.password){
          Platform.notification({
            type: 'error',
            title: t('department.resetPassword.inputPassword'),
          });
          return;
        }   
        let params = {
          password: md5(this.form.password),
          tempCode: this.tenantInform.tenantList[this.current].tempCode,
          tempCodeKey: this.tenantInform.tempToken
        };   
        // params.ua = this.form.ua;
        // params.mode = this.form.mode;
        // if(this.form.tenantId) {
        //   params.tenantId = this.form.tenantId;
        // } else {
        //   params.tenantId = this.tenantInform.tenantList[0].id;
        // }
        // params.password = md5(this.form.password);
        // const { status, message } = await http.post('/account/login', params, false);
        const { status, message, data } = await SettingApi.switchingCompanies(params);
        if (status == 0) {
          Platform.notification({
            type: 'success',
            title: t('system.handoverSuccessfu'),
          });
          this.init = false;
          this.visible = false;
          this.form.password = '';
          //存储token
          userCenterSetTokenInfo(data)
          window.location.href = '/'
        } else {
          const ErrorInfo = ErrorMap[status] || {}
          Platform.notification({
            title: ErrorInfo.title ? ErrorInfo.title : message,
            message: ErrorInfo.message  ? ErrorInfo.message : t('common.base.loginErrorWDZNBYJ'),
            type: ErrorInfo.type ? ErrorInfo.type : 'warning'
          });
        }
      } catch (e) {
        console.error('err', e);
      }
    },
  },
};
</script>
<style lang="scss">
.switchcompanies-dialog {
  .base-modal-body {
    padding: 10px 30px 0;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 20px;
    padding-top: 20px;
  }
  .form-builder {
    label {
      display: none;
    }
  }
  .el-input{
    height: 40px;
    .el-input__inner{
      height: 40px;
    }
    .show_icon{
      width: 18px;
      margin-top: 15px;
      margin-right: 5px;
    }
  }
  .swiper-container {
    width: 100%;
    height: 100%;
    margin-bottom: 15px;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
    width: 91px;
    height: 75px;
    text-align: center;
  }
  .swiper-slide img {
    width: 72px;
    height: 72px;
    border-radius: 8px;
  }
  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    transform: scale(1);
  }
  .brand-right {
    width: 25px;
  }
  .brand-left {
    width: 25px;
  }
  .swiper-button-next{
    outline: none;
  }
  .swiper-button-prev{
    outline: none;
  }
  .swiper-button-next::after,
  .swiper-button-prev::after {
    content: "";
  }
  .enterprises_choose .choose_tit {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 20px;
  }
  .enterprise_name {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 25px;
  }
  .swiper-slide {
    opacity: 0.3;
    cursor: pointer;
  }
  .swiper-slide-active {
    opacity: 1;
  }
}


</style>